<template>
  <div class="wrap">
    <div class="box">
      <div class="login">
        <div class="tit"><h1>登录</h1></div>
        <div class="aa">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="用户名">
              <el-input v-model.trim="form.name"></el-input>
            </el-form-item>

            <el-form-item label="密码">
              <el-input
                placeholder="请输入密码"
                v-model.trim="form.password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
              <el-button type="primary" @click="go_zc">没账户去注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import request from "../api/request";
// import { Message } from "element-ui";
export default {
  data() {
    return {
      form: {
        name: "",
        password: "",
      },
    };
  },

  methods: {
    login() {
      console.log("测试登录按钮");
      // 在登录当中触发actions中的go_login方法
      this.$store.dispatch("go_login", {
        user_name: this.form.name,
        password: this.form.password,
        routerDL: this.$router,
      });
    },

    go_zc() {
      // 点击注册按钮，去注册页面
      console.log("去注册页面");
      this.$router.push({
        name: "zhuce",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  background-image: url("~@a/img/aa.jpg");
  background-size: 100% 100%;
}
.aa {
  background-image: url("~@a/img/bb.png");
  background-size: 100% 100%;
  width: 40%;
  height: 60%;
  opacity: 0.7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.box {
  width: 100%;
  height: 100%;
  text-align: center;
  color: red;
}
.login {
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tit {
  position: absolute;
  margin-top: -150px;
}
</style>